{% extends "volunteer_base.html" %}
{% load i18n %}
{% block head %}
<title>{% trans "首页" %}</title>
{% load staticfiles %}
<!-- Bootstrap -->
<link href="{{ STATIC_URL }}bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bk-icon-2.0/iconfont.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css"/>

{{ block.super }}
{% endblock %}

{% block header %}
{% endblock %}

{% block bar %}
{% endblock %}

{% block content %}
<img style="z-index:-1; position: absolute; top:0; left:0; bottom:0; right:0; width:100%; height: 100%"
     class="img-responsive" src="{{ STATIC_URL }}open/img/homepage.jpg">
<div class="container">
    <div class="row">
        <div class="col-md-5 col-md-offset-1">
            <h1 style="color:#1b252e; margin-top:25vh; font-size:40px">Welcome to volunteer</h1>
            <p style="color:#1b252e; font-size:21px"> 志在心中，愿在行动。尽绵薄之力，予世界些许温暖。愿为星火，聚以燎原。未必万丈光芒，始终温暖有光。</p>
        </div>
        <div class="col-md-4 col-md-offset-1">
            <form style="background-color:white; margin-top:25vh; padding:2vh 2vh 5vh 2vh;opacity: 0.8;" method="post">
                {% csrf_token %}
                <div class="form-group">
                    <input type="text" class="form-control" id="username" placeholder="请输入用户名：" name="username">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" id="password" placeholder="请输入密码：" name="password">
                </div>
                <div class="form-group">
                    <input type="radio" name="userType" value="0" checked>
                    <p style="color: #888;display: inline-block;">&nbsp;学生&nbsp;</p>
                    <input type="radio" name="userType" value="1" checked>
                    <p style="color: #888;display: inline-block;">&nbsp;公益企业&nbsp;</p>
                    <input type="radio" name="userType" value="2" checked>
                    <p style="color: #888;display: inline-block;">&nbsp;管理员&nbsp;</p>

                </div>
                <a style="position: absolute;top: 35vh;left: 23vh;font-size: 18px;" type="submit" id="login_submit"
                   class="btn btn-info">登录</a>
            </form>
            <form style="background-color:white; margin-top:2vh; padding:2vh 2vh 5vh 2vh;opacity: 0.8;">
                <p style="font-size:16px;color: #888"><strong style="color: #888">新用户注册</strong> Sign up</p>
                <div class="form-group">
                    <input type="text" class="form-control" id="register_username" placeholder="用户名:">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" id="register_password" placeholder="密码:">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" id="register_password_confirm" placeholder="确认密码:">
                </div>
                <div class="form-group">
                    <input type="radio" name="registerUserType" value="0" checked>
                    <p style="color: #888;display: inline-block;">&nbsp;学生&nbsp;</p>
                    <input type="radio" name="registerUserType" value="1" checked>
                    <p style="color: #888;display: inline-block;">&nbsp;公益企业&nbsp;</p>
                </div>
                <a style="position: absolute;top: 75vh;left: 23vh;font-size: 18px;" id="register_submit"
                   class="btn btn-warning">注册</a>
            </form>
        </div>
    </div>
</div>

{% endblock content %}

{% block footer %}{% endblock %}

{% block extra_block %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{{ STATIC_URL }}js/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{{ STATIC_URL }}bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkMessage-1.0/js/bkMessage.js"></script>


<script>
    // 登录
    function login_authentication() {
        let username = $("#username").val()
        let password = $("#password").val()
        let role = $("input[name='userType']:checked").val()
        if (!username) {
            new bkMessage({
                message: "用户名不能为空！",
                theme: 'error',
                delay: 3000
            });
            return false
        }
        if (!password) {
            new bkMessage({
                message: "密码不能为空！",
                theme: 'error',
                delay: 3000
            });
            return false
        } else {
            $.ajax({
                type: "post",
                url: "{{ SITE_URL }}login_authentication/",
                dataType: 'json',
                data: {
                    "username": username,
                    "password": password,
                    "role": role,
                    "csrfmiddlewaretoken": $("input[name='csrfmiddlewaretoken']").val(),
                },
                success: function (response) {
                    alert(response['message'])
                    if (response['code'] == 200) {
                        if(role == 0){
                            window.location.href = "{{ SITE_URL }}studentHome/"
                        }
                        else if(role == 1){
                            window.location.href = "{{ SITE_URL }}companyHome/"
                        }
                        else if(role == 2){
                            window.location.href = "{{ SITE_URL }}summaryActivity/"
                        }
                    } else {
                        location.reload()
                    }

                }
            })
        }
    }

    // 注册
    function register_user() {
        let password = $("#register_password").val()
        let password_confirm = $("#register_password_confirm").val()
        if (password != password_confirm) {
            new bkMessage({
                message: "密码不一致！",
                theme: 'error',
                delay: 3000
            });
            return false
        } else {

            $.ajax({
                type: "post",
                url: "{{ SITE_URL }}register/",
                data: {
                    "username": $("#register_username").val(),
                    "password": password,
                    "password": password_confirm,
                    "role": $("input[name='registerUserType']:checked").val(),
                    "csrfmiddlewaretoken": $("input[name='csrfmiddlewaretoken']").val(),
                },
                success: function (response) {
                    alert(response['message'])
                    location.reload()
                }
            })
        }
    }

    $("#login_submit").click(function () {
        login_authentication()
    })
    $("#register_submit").click(function () {
        register_user()
    })

</script>

{% endblock %}